<template>
  <div class="subsidy-files">
    <a-spin :loading="loading">
      <div class="files-section">
        <h3 class="section-title">申请文件</h3>
        <a-row :gutter="[16, 16]">
          <!-- 设计方案 -->
          <a-col :span="8">
            <a-card title="设计方案" size="small" class="file-card">
              <template #extra>
                <a-tag color="blue">必需</a-tag>
              </template>
              <div v-if="designSchemeFile" class="file-item">
                <div class="file-info">
                  <IconFile class="file-icon" />
                  <div class="file-details">
                    <div class="file-name">{{ designSchemeFile.fileName }}</div>
                    <div class="file-meta">
                      <span>{{ designSchemeFile.fileSize || '2.5MB' }}</span>
                      <span>{{ designSchemeFile.uploadTime }}</span>
                    </div>
                  </div>
                </div>
                <div class="file-actions">
                  <a-button type="text" size="small" @click="previewFile(designSchemeFile)">
                    <IconEye />预览
                  </a-button>
                  <a-button type="text" size="small" @click="downloadFile(designSchemeFile)">
                    <IconDownload />下载
                  </a-button>
                </div>
              </div>
              <div v-else class="no-file">
                <div class="no-file-text">暂无文件</div>
              </div>
            </a-card>
          </a-col>

          <!-- 验收意见 -->
          <a-col :span="8">
            <a-card title="验收意见" size="small" class="file-card">
              <template #extra>
                <a-tag color="orange">必需</a-tag>
              </template>
              <div v-if="acceptanceOpinionFile" class="file-item">
                <div class="file-info">
                  <IconFile class="file-icon" />
                  <div class="file-details">
                    <div class="file-name">{{ acceptanceOpinionFile.fileName }}</div>
                    <div class="file-meta">
                      <span>{{ acceptanceOpinionFile.fileSize || '1.8MB' }}</span>
                      <span>{{ acceptanceOpinionFile.uploadTime }}</span>
                    </div>
                  </div>
                </div>
                <div class="file-actions">
                  <a-button type="text" size="small" @click="previewFile(acceptanceOpinionFile)">
                    <IconEye />预览
                  </a-button>
                  <a-button type="text" size="small" @click="downloadFile(acceptanceOpinionFile)">
                    <IconDownload />下载
                  </a-button>
                </div>
              </div>
              <div v-else class="no-file">
                <div class="no-file-text">暂无文件</div>
              </div>
            </a-card>
          </a-col>

          <!-- 支付通知 -->
          <a-col :span="8">
            <a-card title="支付通知" size="small" class="file-card">
              <template #extra>
                <a-tag color="green">可选</a-tag>
              </template>
              <div v-if="paymentNoticeFile" class="file-item">
                <div class="file-info">
                  <IconFile class="file-icon" />
                  <div class="file-details">
                    <div class="file-name">{{ paymentNoticeFile.fileName }}</div>
                    <div class="file-meta">
                      <span>{{ paymentNoticeFile.fileSize || '1.2MB' }}</span>
                      <span>{{ paymentNoticeFile.uploadTime }}</span>
                    </div>
                  </div>
                </div>
                <div class="file-actions">
                  <a-button type="text" size="small" @click="previewFile(paymentNoticeFile)">
                    <IconEye />预览
                  </a-button>
                  <a-button type="text" size="small" @click="downloadFile(paymentNoticeFile)">
                    <IconDownload />下载
                  </a-button>
                </div>
              </div>
              <div v-else class="no-file">
                <div class="no-file-text">暂无文件</div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Message } from '@arco-design/web-vue';
import {
  IconFile,
  IconEye,
  IconDownload
} from '@arco-design/web-vue/es/icon';

// 定义props
const props = defineProps({
  subsidyApplicationId: {
    type: String,
    required: true
  }
});

// 响应式数据
const loading = ref(false);
const designSchemeFile = ref(null);
const acceptanceOpinionFile = ref(null);
const paymentNoticeFile = ref(null);

// 模拟文件数据
const mockFiles = {
  designSchemeFile: {
    fileId: 'FILE001',
    fileName: '森林生态修复设计方案.pdf',
    fileType: 'pdf',
    fileSize: '2.5MB',
    fileUrl: '#',
    uploadTime: '2024-01-10 10:30:00'
  },
  acceptanceOpinionFile: {
    fileId: 'FILE002',
    fileName: '验收意见书.pdf',
    fileType: 'pdf',
    fileSize: '1.8MB',
    fileUrl: '#',
    uploadTime: '2024-01-15 14:20:00'
  },
  paymentNoticeFile: {
    fileId: 'FILE003',
    fileName: '支付通知单.pdf',
    fileType: 'pdf',
    fileSize: '1.2MB',
    fileUrl: '#',
    uploadTime: '2024-01-20 09:15:00'
  }
};

// 加载文件数据
const loadFiles = () => {
  loading.value = true;
  
  // 模拟API调用延迟
  setTimeout(() => {
    designSchemeFile.value = mockFiles.designSchemeFile;
    acceptanceOpinionFile.value = mockFiles.acceptanceOpinionFile;
    paymentNoticeFile.value = mockFiles.paymentNoticeFile;
    loading.value = false;
  }, 300);
};

// 预览文件
const previewFile = (file) => {
  console.log('预览文件:', file);
  Message.info(`预览文件: ${file.fileName}`);
  // 这里可以实现文件预览逻辑
};

// 下载文件
const downloadFile = (file) => {
  console.log('下载文件:', file);
  Message.success(`开始下载: ${file.fileName}`);
  // 这里可以实现文件下载逻辑
};

// 组件挂载时加载数据
onMounted(() => {
  loadFiles();
});
</script>

<style scoped>
.subsidy-files {
  padding: 16px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.file-card {
  height: 200px;
  border: 1px solid #e5e6eb;
  border-radius: 6px;
  transition: all 0.3s;
}

.file-card:hover {
  border-color: #165dff;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.15);
}

.file-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.file-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.file-icon {
  font-size: 24px;
  color: #165dff;
  margin-top: 4px;
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 8px;
  word-break: break-all;
  line-height: 1.4;
}

.file-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #86909c;
}

.file-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f2f3f5;
}

.no-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #c9cdd4;
}

.no-file-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.no-file-text {
  font-size: 14px;
}

:deep(.arco-card-header) {
  padding: 12px 16px;
  border-bottom: 1px solid #f2f3f5;
}

:deep(.arco-card-body) {
  padding: 16px;
  height: calc(100% - 49px);
}

:deep(.arco-card-header-title) {
  font-size: 14px;
  font-weight: 500;
}
</style>